<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>沙立方</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="renderer" content="webkit">
<!-- 设置缩放 -->
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection" content="telephone=no, email=no" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png" href="../assets/i/favicon.png">
<link rel="stylesheet" href="../assets/css/amazeui.min.css" />
<link rel="stylesheet" href="../assets/css/app.css">
<link rel="stylesheet" href="../assets/css/yttApp.css">
</head>

<body class="bg-fff login" style="background: url(../img/loginBack.jpg) no-repeat; background-size: 100% 100%;">
	<header data-am-widget="header" class="am-header bg-white am-header-fixed bg-085492">
		<div class="am-header-left am-header-nav text-black padding-left05">
			<a  href="javascript:history.go(-1)" class="text-black">
			  	<i class="am-align-left am-margin-0 am-icon-angle-left am-icon-md text-black co-fff"></i>
			  </a> 
		</div>
		<h1 class="am-header-title teblack">
			<a href="#title-link" class="co-fff">登录</a>
		</h1>
	</header>
	<div class="am-container loginPage">
		<form class="am-form am-form-horizontal userlogin am-margin-top-xl">
			<div class="am-text-center am-padding-xl "
				style="font-size: 40px;color:#FFAC2A;letter-spacing:5px;">沙立方</div>
			<div class="am-form-group number">
				<label for="user_name" class="am-u-sm-1 am-form-label" style="color:#C1C1C1;"><i
					class="am-icon-user"></i></label>
				<div class="am-u-sm-11">
					<input type="tel" id="user_name" value="" placeholder="请输入您的手机号码"
						maxlength="11"
						onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">
				</div>
				<div class="font12 yznr" style="color:red;margin-left:3.5rem;display:none">手机号格式错误</div>
			</div>
			<div class="am-form-group yzms">
				<label for="user_pwd" class="am-u-sm-1 am-form-label" style="color:#C1C1C1;"><i
					class="am-icon-key"></i></label>
				<div class="am-u-sm-11 posi-rela">
					<input type="number" id="user_pwd" placeholder="请输入您的验证码">
					<button type="button" id="code_btn" class="code_btn" style="background:#FFAC2A;border:none">获取验证码</button>
				</div>
				<div class="font12 yzmr" style="color:red;margin-left:3.5rem;display:none"></div>
			</div>
			<div class="am-cf am-padding-sm">
				<input id="login" type="button" value="登 录" class="am-btn-bluehx am-btn-block am-margin-top-sm radius20" style="background:#FFAC2A;border:none" />
			</div>
			<a class="am-cf am-padding-right-sm am-align-right am-padding-top-sm am-margin-0 font12 text-808080"
				href="register.html"> 没有账号？立即注册 </a>
		</form>
	</div>
	
	<div class="am-modal am-modal-loading am-modal-no-btn radius4" tabindex="-1" id="my-modal-loading" data-am-modal="{closeViaDimmer: 0}">
		  <div class="am-modal-dialog" style="border-radius: 4px;">
		    	<div class="am-modal-hd">加载中...</div>
			    <div class="am-modal-bd">
			      <span class="am-icon-spinner am-icon-spin"></span>
			    </div>
		  </div>
		</div>
		<!-- 注册弹窗 -->
		<div class="am-modal am-modal-alert" tabindex="-1" id="operationModal" data-am-modal="{closeViaDimmer: 0}">
		  <div class="am-modal-dialog" style="border-radius: 4px;">
		    	<div class="am-modal-hd"></div>
			   	<div class="am-modal-bd operationModalBody"></div>
		   		<div class="am-modal-footer">
			      <span class="am-modal-btn" data-am-modal-confirm>去注册</span>
			      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
			    </div>
	  		</div>
		</div>
		<div class="am-modal am-modal-alert" tabindex="-1" id="alert1" data-am-modal="{closeViaDimmer: 0}">
		  <div class="am-modal-dialog" style="border-radius: 4px;">
		    	<div class="am-modal-hd"></div>
			   	<div class="am-modal-bd alert1"></div>
		   		<div class="am-modal-footer">
		      		<span class="am-modal-btn">确定</span>
		    	</div>
	  		</div>
		</div>
	<script src="../assets/js/jquery.min.js"></script>
	<script src="../assets/js/jquery.cookie.js"></script>
	<script src="../assets/js/amazeui.min.js"></script>
	<script src="../assets/js/fastclick.min.js"></script>
	<script src="../js/comm.js"></script>
	<script src="../js/slf.js"></script>
	<script>
		$(function() {
			var counts = 0;
			$('#user_name').on('input',function(){
				$('.yznr').css('display','none');
			})
			$('#user_pwd').on('input',function(){
				$('.yzmr').css('display','none');
			})
			var values;
			$("#code_btn").click(sendIdentifyCode);
			function sendIdentifyCode(){
				counts++;
				regular = /^1[345789]\d{9}$/;
				var phone = $.trim($("#user_name").val());
				if (!regular.test(phone)) {
					counts = 0;
					$('.yznr').css('display','block');
				}else if(counts == 1){
					console.log(counts);
					$('.yznr').css('display','none');
					 slf.ajax({
						url : "/sendIdentifyCode",
						param : {
							phone : phone,
							flag:1,
						},
						success : function(data){
							console.log("获取验证码并判断是否注册过")
							console.log(data)
							//TODO 需要调提示框样式，短信发送成功的
							if(data.res==1){
								values = "短信发送成功！";
								$('.alert1').text(values);
								$('#alert1').modal({
									closeViaDimmer: false,
								}); 
		            			$("#code_btn").unbind();
		            			var count = 1 ;
		            			var sum = 60;
		            			var i = setInterval(function(){
		            				if(count > 59){
		            					$("#code_btn").text('获取验证码');
		            					$("#code_btn").bind('click',sendIdentifyCode);
		            					clearInterval(i);
		            				}else{
		            					$("#code_btn").text('剩余'+parseInt(sum - count)+'秒');
		            				}
		            				count++;
		            			},1000);
		            			counts = 0;
							}else if(data.res==0){
								$(".operationModalBody").html(data.resMsg);
								$('#operationModal').modal({
									closeViaDimmer: false,
									onConfirm: function(options) {
										window.location.href = "register.html"
							        },
								}); 
								
							}
				 		},
				 		error:function(){
				 			counts = 0;
				 		}
						
					});
				} 
			}
			
			$("#login").click(function() {
				regular = /^1[345789]\d{9}$/;
				var phone = $.trim($("#user_name").val());
				var password = $.trim($("#user_pwd").val());
				if(slf.isBlank(password)){
					values = "请输入验证码！";
					$('.alert1').text(values);
					$('#alert1').modal();
				 }else if (!regular.test(phone)) {
					 values = "手机号码格式错误！";
						$('.alert1').text(values);
						$('#alert1').modal();
				}else {
					slf.ajax({
						url : "/userIdentifyCodeLogin",
						param : {
							loginName : phone,
							password : password
						},
						success:function(data){
						if(data.res==1){
							//存缓存  token
							slf.setCookie(slf.slfToken,data.obj.token);
							window.location.href = "/slf/index.html"
						}else{
							var yhz = data.resMsg;
							$('.yzmr').text(yhz);
							$('.yzmr').css('display','block');
							}
						}
					});
				}
			});
		});
	</script>
</body>

</html>